<template>
  <Layout>
    <page-header :title="title"></page-header>
    <div class="row">
      <div class="col-xl-8">
        <Stat @screen="cardscreen" />
        <div class="card card-body" style="margin-top: 0px">
          <h4
            class="card-title mb-4"
            style="font-size: 17px; margin-bottom: 0px !important"
          >
            24小时数据增量走势变化
            <div class="float-right">
              <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link">
                  {{sel}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="全部类型">全部类型</el-dropdown-item>
                  <el-dropdown-item command="资讯数据">资讯数据</el-dropdown-item>
                  <el-dropdown-item command="招标数据">招标数据</el-dropdown-item>
                  <el-dropdown-item command="工商数据">工商数据</el-dropdown-item>
                  <el-dropdown-item command="招聘数据">招聘数据</el-dropdown-item>
                  <el-dropdown-item command="股票数据">股票数据</el-dropdown-item>
                  <el-dropdown-item command="政策数据">政策数据</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </h4>
          <apexchart
            class="apex-charts"
            height="350"
            type="bar"
            dir="ltr"
            ref="chart"
            :series="columnDatalabelChart.series"
            :options="columnDatalabelChart.chartOptions"
          ></apexchart>
        </div>
      </div>
      <div class="col-xl-4">
        <RecentActivity type="2" />
      </div>
    </div>
    <div class="card col-12 seedbody card-body">
      <div class="all-products">全部信息</div>
      <div class="states-type">
        <span class="type-title">全部类型:</span>
        <button
          type="button"
          class="btn btn-light rounded-pill btn-sm states-type-item"
          :class="{ isActive: siteChange == item.index }"
          v-for="item in allSite"
          :key="item.index"
          @click="allSites(item)"
        >
          {{ item.name }}
        </button>
      </div>
      <div class="states-time">
        <div>
          <span class="time-title">二级分类:</span>
          <button
            type="button"
            class="btn btn-light rounded-pill btn-sm states-time-item"
            :class="{ isActive: secondLevel == item.index }"
            v-for="item in secondLevelList[siteChange-1]"
            :key="item.index"
            @click="secondLevelItem(item)"
          >
            {{ item.type }}
          </button>
        </div>
      </div>
      <div class="states-time">
        <div>
          <span class="time-title">全部状态:</span>
          <button
            type="button"
            class="btn btn-light rounded-pill btn-sm states-time-item"
            :class="{ isActive: stateChange == item.index }"
            v-for="item in stateList"
            :key="item.index"
            @click="stateItem(item)"
          >
            {{ item.name }}
          </button>
        </div>
      </div>
    </div>
    <Transaction />
  </Layout>
</template>

<script>
import Layout from "../../../layouts/main";
import PageHeader from "@/components/page-header";
import Stat from "./widget";
import RecentActivity from "./recent-activity";
import Transaction from "../transaction";

export default {
  components: {
    Layout,
    PageHeader,
    Stat,
    RecentActivity,
    Transaction,
  },
  data() {
    return {
      title: "信源管理",
      columnDatalabelChart: {
        series: [
          {
            name: '全部类型',
            data: ['20021', '43280', '61541', '11231', '30001', '23123', '13321', '12134', '9252', '8224', '7234', '8543', '12331']
          }
        ],
        chartOptions: {
          chart: {
            toolbar: {
              show: false,
            }
          },
          plotOptions: {
            bar: {
              dataLabels: {
                position: 'top', // top, center, bottom
              },
            }
          },
          dataLabels: {
            enabled: false,
          },
          colors: ['#556ee6'],
          grid: {
            borderColor: '#f1f1f1',
          },
          xaxis: {
            categories: ["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"],
            
            // axisBorder: {
            //   show: false
            // },
            // axisTicks: {
            //   show: false
            // },
            crosshairs: {
              fill: {
                type: 'gradient',
                gradient: {
                  colorFrom: '#D8E3F0',
                  colorTo: '#BED1E6',
                  stops: [0, 100],
                  opacityFrom: 0.4,
                  opacityTo: 0.5,
                }
              }
            },
            tooltip: {
              enabled: true,
              offsetY: -35,
            }
          },
          fill: {
            gradient: {
              shade: 'light',
              type: "horizontal",
              shadeIntensity: 0.25,
              gradientToColors: undefined,
              inverseColors: true,
              opacityFrom: 1,
              opacityTo: 1,
              stops: [50, 0, 100, 100]
            },
          },
          yaxis: {
            // axisBorder: {
            //   show: false
            // },
            // axisTicks: {
            //   show: false,
            // },
            labels: {
              show: true,
              formatter: function (val) {
                return val;
              }
            }
          },
        }
      },
      // 信源筛选
      allSite: [
        {
          name: "全部",
          index: 1,
        },
        {
          name: " 资讯信源",
          index: 2,
        },
        {
          name: "招标信源",
          index: 3,
        },
        {
          name: "政策信源",
          index: 4,
        },
        {
          name: "工商信源",
          index: 5,
        },
        {
          name: "证券信源",
          index: 6,
        },
        {
          name: "自媒体号",
          index: 7,
        },
        {
          name: "短视频信源",
          index: 8,
        },
        {
          name: "搜索抓取",
          index: 9,
        },
        {
          name: "OTA旅游",
          index: 10,
        },
        {
          name: "招聘平台",
          index: 11,
        },
        {
          name: "法律信源",
          index: 12,
        },
        {
          name: "知产信源",
          index: 13,
        },
      ],
      siteChange: 2,
      // 二级筛选
      secondLevelList: [
        [
          {
            type: "全部",
            index: 1,
          },
        ],[
          {
            type: "全部",
            index: 1,
          },{
            type: "综合",
            index: 2,
          },
          {
            type: "财经",
            index: 3,
          },
          {
            type: "体育",
            index: 4,
          },
          {
            type: "娱乐",
            index: 5,
          },
          {
            type: "儿童",
            index: 6,
          },
          {
            type: "健康",
            index: 7,
          },
          {
            type: "科技",
            index: 8,
          },
          {
            type: "企业",
            index: 9,
          },
          {
            type: "房产",
            index: 10,
          },
          {
            type: "生活",
            index: 11,
          },
          {
            type: "购物",
            index: 12,
          },
        ],[
          {
            type: "全部",
            index: 1,
          },{
            type: "综合",
            index: 2,
          },
          {
            type: "建筑工程",
            index: 3,
          },
          {
            type: "医疗卫生",
            index: 4,
          },
          {
            type: "大型企业",
            index: 5,
          },
          {
            type: "省级站点",
            index: 6,
          },
          {
            type: "全国站点",
            index: 7,
          },
        ],[
          {
            type: "全部",
            index: 1,
          },{
            type: "中央政府",
            index: 2,
          },
          {
            type: "省级政府",
            index: 3,
          },
          {
            type: "市级政府",
            index: 4,
          },
          {
            type: "地方政府",
            index: 5,
          },
          {
            type: "监管机构",
            index: 6,
          },
        ],[
          {
            type: "全部",
            index: 1,
          },{
            type: "公司名称",
            index: 2,
          },{
            type: "基础信息",
            index: 3,
          },{
            type: "图谱信息",
            index: 4,
          },{
            type: "变动信息",
            index: 5,
          },
        ],[
          {
            type: "全部",
            index: 1,
          },{
            type: "股价",
            index: 2,
          },
          {
            type: "公司",
            index: 3,
          },
          {
            type: "研报",
            index: 4,
          },
          {
            type: "公告",
            index: 5,
          },
        ],[
          {
            type: "全部",
            index: 1,
          },{
            type: "综合",
            index: 2,
          },
          {
            type: "官媒",
            index: 3,
          },
          {
            type: "政府",
            index: 4,
          },
          {
            type: "财经",
            index: 5,
          },
          {
            type: "体育",
            index: 6,
          },
          {
            type: "娱乐",
            index: 7,
          },
          {
            type: "儿童",
            index: 8,
          },
          {
            type: "健康",
            index: 9,
          },
          {
            type: "科技",
            index: 10,
          },
          {
            type: "大v",
            index: 11,
          },
        ],[
          {
            type: "全部",
            index: 1,
          },{
            type: "新闻媒体",
            index: 2,
          },
          {
            type: "美食",
            index: 3,
          },
          {
            type: "汽车",
            index: 4,
          },
          {
            type: "教育",
            index: 5,
          },
          {
            type: "科技",
            index: 6,
          },
          {
            type: "影视",
            index: 7,
          },
          {
            type: "大v",
            index: 8,
          },
        ],[
          {
            type: "全部",
            index: 1,
          },{
            type: "抖音",
            index: 2,
          },
          {
            type: "快手",
            index: 3,
          },
        ],[
          {
            type: "全部",
            index: 1,
          },{
            type: "酒店旅馆",
            index: 2,
          },
          {
            type: "景区景点",
            index: 3,
          },
          {
            type: "游记攻略",
            index: 4,
          },
          {
            type: "口碑点评",
            index: 5,
          },
        ],[
          {
            type: "全部",
            index: 1,
          },{
            type: "综合型",
            index: 2,
          },
          {
            type: "偏行业型",
            index: 3,
          },
          {
            type: "地方型",
            index: 4,
          },
        ],[
          {
            type: "全部",
            index: 1,
          },{
            type: "判决书",
            index: 2,
          },
          {
            type: "失信执行人",
            index: 3,
          },
          {
            type: "法院传票",
            index: 4,
          },{
            type: "开庭公告",
            index: 5,
          },
          {
            type: "法拍信息",
            index: 6,
          },
          {
            type: "律所信息",
            index: 7,
          },
          {
            type: "律师信息",
            index: 8,
          },
        ],[
          {
            type: "全部",
            index: 1,
          },{
            type: "软件著作权",
            index: 2,
          },
          {
            type: "专利著作权",
            index: 3,
          },
        ]
      ],
      secondLevel: 1,
      stateList: [
        {
          name: "全部",
          index: 1,
        },{
          name: "正常",
          index: 2,
        },{
          name: "异常",
          index: 3,
        },{
          name: "停止",
          index: 4,
        },
      ],
      stateChange: 1,
      sel: '全部类型',
    };
  },
  methods: {
    // 跳转添加信源
    addSeed() {
      let routeInfo = this.$router.resolve({
        name: "AddSeed",
      });
      window.open(routeInfo.href, "_blank");
    },
    //站点筛选
    allSites(item) {
      this.siteChange = item.index;
      this.secondLevel = 1
    },
    //类型筛选
    secondLevelItem(item) {
      this.secondLevel = item.index;
    },
    stateItem(item){
      this.stateChange = item.index;
    },
    handleCommand(value){
      this.sel = value
      this.columnDatalabelChart.series[0].name = value;
      let arr = []
      if(value=='全部类型'){
        arr = ['20021', '43280', '61541', '11231', '30001', '23123', '13321', '12134', '9252', '8224', '7234', '8543', '12566']
      }else if(value=='资讯数据'){
        arr = ['12021', '23210', '26241', '5231', '12001', '12123', '6321', '6134', '4212', '4224', '4234', '4523', '7223']
      }else if(value=='招标数据'){
        arr = ['5021', '13210', '15511', '3231', '6001', '9123', '3321', '4134', '3252', '3524', '2224', '3243', '4341']
      }
      this.columnDatalabelChart.series[0].data = arr;
      this.$refs.chart.updateOptions({
        series:this.columnDatalabelChart.series
      })
    },
    cardscreen(i){
      this.stateChange = i;
    }
  },
  created () {
    let arr = []
    for (let i = 0; i <= 12; i++) {
      var day1 = new Date();
      day1.setTime(day1.getTime()-(i*2)*60*60*1000);
      var hours = day1.getHours()>9?day1.getHours():'0'+day1.getHours();
      var s1 = hours + ":00"
      arr.unshift(s1)
    }
    this.columnDatalabelChart.chartOptions.xaxis.categories = arr
    console.log(this.$route.query.type);
    if(this.$route.query.type){
      if(this.$route.query.type=='有效信源'){
        this.stateChange = 2;
      }else if(this.$route.query.type=='失效信源'){
        this.stateChange = 4;
      }else if(this.$route.query.type=='异常信源'){
        this.stateChange = 3;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.seedTitle {
  font-size: 15px;
  color: #000000;
  font-weight: 600;
}
input,
.multiselect {
  width: 350px;
  height: 40px;
}
input {
  // border: 1px solid #ced4da !important;
  outline: none;
  border-radius: 5px;
}
.duoxuan {
  display: flex;
  justify-content: space-between;
}
.tijiao {
  width: 200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.form-group {
  display: flex;
  justify-content: space-between;
  margin-left: 10px;
  margin-right: 10px;
  input {
    &:nth-child(2) {
      float: right;
    }
  }
  .basic-title,
  .extend-title {
    display: inline-block;
    border-bottom: 1px solid #bbb;
    font-size: 16px;
  }
}
.isActive {
  color: #fff;
  background-color: #5664d2;
}
.seedfrist {
  margin-top: 0px !important;
}
.seedbody {
  margin-bottom: 0px;
  margin-top: 0px !important;
}
// 走势图
.sparklines {
  margin-top: 20px;
  font-size: 17px;
  color: #343a40;
}
.count {
  .title {
    font-size: 15px;
    font-weight: bold;
  }
  .zhankai {
    float: right;
    img {
      vertical-align: middle;
      width: 20px;
      padding-right: 10px;
    }
  }
}
.all-products {
  font-size: 15px;
  font-weight: bold;
}
.states-type {
  margin-top: 20px;
  .type-title {
    display: inline-block;
    color: #74788d;
    padding-right: 10px;
  }
  .states-type-item {
    font-size: 12px;
    margin: 0 10px;
    padding-left: 8px;
    padding-right: 8px;
    min-width: 70px;
    &:hover {
      cursor: pointer;
    }
  }
}
.states-time {
  margin-top: 20px;
  .time-title {
    display: inline-block;
    color: #74788d;
    padding-right: 10px;
  }
  .states-time-item {
    font-size: 12px;
    margin: 0 10px;
    padding-left: 16px;
    padding-right: 16px;
    min-width: 70px;
    &:hover {
      cursor: pointer;
    }
  }
}
.card-body {
  margin-top: 20px;
}
</style>